Skip to content

teamid 콘텐츠 스타일 조정#90

Closed
Jieunsse wants to merge 5 commits into
mainfrom
fix/kanban-list-routes
Closed

teamid 콘텐츠 스타일 조정#90
Jieunsse wants to merge 5 commits into
mainfrom
fix/kanban-list-routes

Conversation

@Jieunsse

Copy link
Copy Markdown
Contributor

Summary

  • 이 PR에서 변경한 내용 한 줄 요약

Issue

  • Closes #

Scope

  • 포함

    • 변경한 내용
  • 특이사항

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @Jieunsse, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 인터페이스의 시각적 피드백과 레이아웃 일관성을 향상시키는 데 중점을 둡니다. 칸반 태스크 업데이트 시 로딩 상태를 명확히 표시하여 사용자에게 진행 상황을 알리고, 사이드바 및 내비게이션 바에 로그아웃 기능을 통합하여 접근성을 높였습니다. 또한, 특정 페이지의 CSS 스타일을 조정하여 전반적인 레이아웃 정렬을 개선했습니다.

Highlights

  • 칸반 아이템 로딩 상태 시각화: 서버 요청이 2초 이상 지연될 경우, 칸반 아이템이 흐리게 표시되고 상호작용이 비활성화되어 사용자에게 진행 상황을 명확히 전달합니다.
  • 로그아웃 기능 통합: 사이드바와 팀 내비게이션 컴포넌트에 로그아웃 핸들러가 추가되어 사용자 경험을 개선하고 접근성을 높였습니다.
  • 레이아웃 스타일 조정: 특정 페이지의 메인 콘텐츠와 데스크톱 사이드바 너비가 조정되어 전반적인 레이아웃 정렬 및 일관성이 개선되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/app/(root)/[teamid]/_domain/components/Kanban/KanbanItem.module.css
    • .cardWrapper에 부드러운 opacity 전환 효과를 추가했습니다.
    • 서버 요청 대기 중인 칸반 카드에 적용될 .cardPending 스타일을 추가했습니다.
  • src/app/(root)/[teamid]/_domain/components/Kanban/KanbanItem.tsx
    • task.pending 상태에 따라 .cardPending CSS 클래스를 동적으로 적용하도록 업데이트했습니다.
  • src/app/(root)/[teamid]/_domain/components/Team/SidebarWrapper.tsx
    • 로그아웃 API 호출 및 로그인 페이지 리디렉션을 처리하는 handleLogout 함수를 추가했습니다.
    • Sidebar 컴포넌트에 onLogout prop을 전달하도록 수정했습니다.
  • src/app/(root)/[teamid]/_domain/components/Team/TeamNavClient.tsx
    • 로그아웃 API 호출 및 로그인 페이지 리디렉션을 처리하는 handleLogout 함수를 추가했습니다.
    • TeamNav 컴포넌트에 onLogout prop을 전달하도록 수정했습니다.
  • src/app/(root)/[teamid]/_domain/hooks/useKanbanTasks.ts
    • 칸반 태스크 업데이트 시 2초 이상 응답이 없을 경우에만 pending 상태를 표시하는 '소프트 낙관적 UI' 로직을 구현했습니다.
    • 빠른 응답 시 깜빡임을 방지하기 위해 pendingTimer를 도입하고 완료 시 취소하도록 했습니다.
  • src/app/(root)/[teamid]/_domain/interfaces/team.ts
    • KanbanTask 인터페이스에 pending?: boolean; 속성을 추가하여 서버 요청 진행 상태를 나타내도록 했습니다.
  • src/app/(root)/[teamid]/page.module.css
    • .mainContents에서 margin-left: 24px를 제거했습니다.
    • .desktopSidebarwidthmin-width270px에서 198px로 조정하여 레이아웃을 개선했습니다.
  • src/app/(root)/addteam/_domain/components/AddTeamSidebarWrapper.tsx
    • 로그아웃 API 호출 및 로그인 페이지 리디렉션을 처리하는 handleLogout 함수를 추가했습니다.
    • Sidebar 컴포넌트에 onLogout prop을 전달하도록 수정했습니다.
Activity
  • 현재까지 이 PR에 대한 특별한 코멘트나 리뷰 활동은 없습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

이 PR은 칸반 보드 UX 개선, 로그아웃 기능 추가, 전반적인 스타일 조정을 포함합니다. 서버 응답 지연 시 'pending' 상태를 표시하는 로직은 좋은 개선입니다. 다만, 여러 컴포넌트에 걸쳐 중복된 로그아웃 로직이 발견되어 이를 커스텀 훅으로 추출하여 재사용성을 높이는 것을 제안합니다. 또한 useKanbanTasks 훅의 타임아웃 값을 상수로 정의하여 가독성을 개선할 수 있습니다.

Comment on lines +13 to +16
const handleLogout = async () => {
await fetch('/api/auth/logout', { method: 'POST' });
router.push('/login');
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

로그아웃 로직이 TeamNavClient.tsx, AddTeamSidebarWrapper.tsx 등 여러 컴포넌트에 중복되어 있습니다. 코드 재사용성을 높이고 유지보수를 용이하게 하기 위해 이 로직을 커스텀 훅(예: useAuth)으로 추출하는 것을 권장합니다.

예시:

// src/hooks/useAuth.ts
import { useRouter } from 'next/navigation';

export function useAuth() {
  const router = useRouter();

  const logout = async () => {
    await fetch('/api/auth/logout', { method: 'POST' });
    router.push('/login');
  };

  return { logout };
}

이후 각 컴포넌트에서는 const { logout } = useAuth(); 와 같이 훅을 호출하고 onLogout={logout}으로 전달하여 사용할 수 있습니다.

Comment on lines +21 to +24
const handleLogout = async () => {
await fetch('/api/auth/logout', { method: 'POST' });
router.push('/login');
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

이곳의 로그아웃 로직은 다른 컴포넌트에서도 반복되고 있습니다. 코드 중복을 피하고 유지보수성을 높이기 위해, 이 로직을 별도의 커스텀 훅으로 추출하여 사용하는 것을 고려해 보세요.

Comment on lines +134 to +139
// 2초 이상 응답이 없을 때만 pending 표시 (빠른 응답 시 깜빡임 방지)
const pendingTimer = window.setTimeout(() => {
setTasks((prev) =>
prev.map((task) => (task.id === taskId ? { ...task, pending: true } : task)),
);
}, 2000);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

하드코딩된 숫자 2000은 '매직 넘버'로, 코드의 가독성과 유지보수성을 저해할 수 있습니다. PENDING_UI_DELAY_MS와 같이 의미를 명확히 나타내는 상수로 정의하여 사용하는 것이 좋습니다. 이 상수는 훅의 최상단에 선언하는 것이 이상적이지만, 우선 아래와 같이 수정하여 가독성을 높일 수 있습니다.

Suggested change
// 2초 이상 응답이 없을 때만 pending 표시 (빠른 응답 시 깜빡임 방지)
const pendingTimer = window.setTimeout(() => {
setTasks((prev) =>
prev.map((task) => (task.id === taskId ? { ...task, pending: true } : task)),
);
}, 2000);
// 2초 이상 응답이 없을 때만 pending 표시 (빠른 응답 시 깜빡임 방지)
const PENDING_UI_DELAY_MS = 2000;
const pendingTimer = window.setTimeout(() => {
setTasks((prev) =>
prev.map((task) => (task.id === taskId ? { ...task, pending: true } : task)),
);
}, PENDING_UI_DELAY_MS);

Comment on lines +12 to +15
const handleLogout = async () => {
await fetch('/api/auth/logout', { method: 'POST' });
router.push('/login');
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

이곳의 로그아웃 로직은 다른 컴포넌트에서도 반복되고 있습니다. 코드 중복을 피하고 유지보수성을 높이기 위해, 이 로직을 별도의 커스텀 훅으로 추출하여 사용하는 것을 고려해 보세요.

@Jieunsse Jieunsse closed this Feb 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant